<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>RGB与十六位颜色互转</title>
		<style type="text/css">
			.box {
				width: 100%;
				height: 100%;
			}

			.title {
				text-align: center;
				border-bottom: 1px solid #666666;
				padding: 10px 0 16px;
			}

			.containor {
				width: 1000px;
				margin: 0 auto;
			}

			.item {
				margin-bottom: 18px;
				color: #666666;
			}

			.input_ {
				width: 240px;
				border: 1px solid #dcdfe6;
				height: 27px;
				border-radius: 2px;
				letter-spacing: 1px;
			}

			.input_:focus {
				outline: none;
				border: 1px solid #409eff;
			}

			.width {
				width: 73px;
			}

			.btn {
				border: 0;
				background: #409eff;
				color: #fff;
				padding: 6px 15px;
				cursor: pointer;
				border-radius: 2px;
				margin: 0 10px;
			}

			.btn:hover {
				box-shadow: 0 0 8px 0 rgb(232 237 250 / 60%), 0 2px 4px 0 rgb(232 237 250 / 50%);
				opacity: .8;
			}

			.btn:focus {
				outline: none;
			}

			/* 谷歌 */
			input::-webkit-outer-spin-button,
			input::-webkit-inner-spin-button {
				-webkit-appearance: none;
				appearance: none;
				margin: 0;
			}

			/* 火狐 */
			input {
				-moz-appearance: textfield;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h2 class="title">RGB颜色与十六位颜色相互转换</h2>
			<div class="containor">
				<div class="item">
					<span class="tit">RGB转十六进制颜色：</span>
					<input type="number" id="r" class="input_ width"></input>
					<input type="number" id="g" class="input_ width"></input>
					<input type="number" id="b" class="input_ width"></input>
					<button class="btn" onclick="changeRGB()">转换</button>
					<input type="text" id="resHex" class="input_"></input>
					<button class="btn" id="clearRgb">清空</button>
				</div>

				<div class="item">
					<span class="tit">十六进制颜色转RGB：</span>
					<input type="text" id="hex" class="input_"></input>
					<button class="btn" onclick="changeHex()">转换</button>
					<input type="text" id="res_r" class="input_ width"></input>
					<input type="text" id="res_g" class="input_ width"></input>
					<input type="text" id="res_b" class="input_ width"></input>
					<button class="btn" id="clear">清空</button>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			function changeRGB() {
				let r = document.getElementById('r').value;
				let g = document.getElementById('g').value;
				let b = document.getElementById('b').value;
				let rgb_ = `rgb(${r},${g},${b})`
				let s = colorHex(rgb_)

				document.getElementById('resHex').value = s
			}

			function changeHex() {
				let hex_ = document.getElementById('hex').value;

				let resRgb = colorRgb(hex_)

				let arr = resRgb.split(',')

				document.getElementById('res_r').value = arr[0]
				document.getElementById('res_g').value = arr[1]
				document.getElementById('res_b').value = arr[2]
			}

			document.getElementById('clearRgb').addEventListener('click', function() {
				document.getElementById('r').value = '';
				document.getElementById('g').value = '';
				document.getElementById('b').value = '';
				document.getElementById('resHex').value = ''
			})

			document.getElementById('clear').addEventListener('click', function() {
				document.getElementById('res_r').value = '';
				document.getElementById('res_g').value = '';
				document.getElementById('res_b').value = '';
				document.getElementById('hex').value = ''
			})


			// rgb转为十六进制颜色
			var colorHex = function(color) {
				var that = color;
				//十六进制颜色值的正则表达式
				var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
				// 如果是rgb颜色表示
				if (/^(rgb|RGB)/.test(that)) {
					var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
					var strHex = "#";
					for (var i = 0; i < aColor.length; i++) {
						var hex = Number(aColor[i]).toString(16);
						if (hex.length < 2) {
							hex = '0' + hex;
						}
						strHex += hex;
					}
					if (strHex.length !== 7) {
						strHex = that;
					}
					return strHex;
				} else if (reg.test(that)) {
					var aNum = that.replace(/#/, "").split("");
					if (aNum.length === 6) {
						return that;
					} else if (aNum.length === 3) {
						var numHex = "#";
						for (var i = 0; i < aNum.length; i += 1) {
							numHex += (aNum[i] + aNum[i]);
						}
						return numHex;
					}
				}
				return that;
			};

			// 十六进制颜色转为RGB
			var colorRgb = function(sColor) {
				sColor = sColor.toLowerCase();
				//十六进制颜色值的正则表达式
				var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
				// 如果是16进制颜色
				if (sColor && reg.test(sColor)) {
					if (sColor.length === 4) {
						var sColorNew = "#";
						for (var i = 1; i < 4; i += 1) {
							sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
						}
						sColor = sColorNew;
					}
					//处理六位的颜色值
					var sColorChange = [];
					for (var i = 1; i < 7; i += 2) {
						sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
					}
					// return "RGB(" + sColorChange.join(",") + ")";
					return sColorChange.join(",");
				}
				return sColor;
			};
		</script>
	</body>
</html>
